<template>
    <!-- 
        props	配置选项，具体看下表	object
            label	指定节点标签为节点对象的某个属性值	string, function(data, node)	
            children	指定子树为节点对象的某个属性值	string	
            disabled	指定节点选择框是否禁用为节点对象的某个属性值	boolean, function(data, node)	
            isLeaf	指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效	boolean, function(data, node)	
        load	加载子树数据的方法，仅当 lazy 属性为true 时生效	function(node, resolve)
        lazy	是否懒加载子节点，需与 load 方法结合使用	boolean	—	false
        accordion	是否每次只打开一个同级树节点展开	boolean	—	false
        node-click	节点被点击时的回调	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
     -->
    <el-tree :props="props" :load="loadNode" lazy accordion @node-click="nodeClickHandle" />
</template>
<script>
import { getProdTypes } from '@/api/request/product/index'
import { songFun } from '@/utils/index';
export default {
    name: 'tree-page',
    data() {
        return {
            props: {
                label: 'name',
                children: 'children',
                isLeaf: 'leaf'
            },
            saveLeve0:[]
        };
    },
    methods: {
        // 页面加载会自动执行，无需手动调用。渲染后端给回来的数据。
        loadNode(node, resolve) {
            console.log('node', node);
            if (node.level === 0) {
                this.prodTyps({ type: '' }, leve0 => {
                    leve0 = songFun.usePropsAtrr(leve0)
                    this.saveLeve0 = leve0
                    return resolve(leve0);
                })
            }
            if (node.level >= 1) {
                let leve1 = []
                this.saveLeve0.forEach( item => {
                    if(item.cid == node.data.cid) return leve1 = item.children
                })
                return resolve(leve1);
            }
        },
        async prodTyps(params, callback) {  // bug：请求数据执行的比 loadNode 要慢，所以不能正常展示请求回的数据。使用 callback 确保数据回来以后在执行渲染。
            let res = await getProdTypes('/prodType', params)
            console.log('产品类型', res);
            if (res.code == 200) {
                callback(res)
            } else {
                this.$message.error('数据获取失败！')
            }
        },
        nodeClickHandle(data, node) {
            console.log('data', data, 'node', node);
            this.$emit('send-tree-data', data)
        }
    }
}
</script>
<style scoped></style>